<template>
  <div class="edit">
    <div class="edit-title">
      <span class="title-1">资料管理</span> / <span class="title-2"> {{ $route.query.id ? '编辑' : '新增' }}</span>
    </div>
    <div class="edit-content">
      <div class="edit-content-title">资料{{ $route.query.id ? '编辑' : '新增' }}</div>
      <div class="edit-content-form">
        <el-form ref="formRef" :rules="rules" :label-position="labelPosition" :model="formLabelAlign"
          label-width="80px">
          <el-row :gutter="20">
            <el-col :span="13">
              <div class="grid-content bg-purple">
                <div style="display: flex; align-items: end;">
                  <div style="flex: 6">
                    <el-form-item label="资料名称">
                      <el-input v-model="formLabelAlign.name" :rows="7" placeholder="请输入资料名称" type="textarea" />
                    </el-form-item>
                  </div>
                  <div style="flex: 2; margin-left: 20px">
                    <el-form-item label="封面" prop="cover">
                      <UploadImage v-model="formLabelAlign.cover" class="custom-uploader" />
                    </el-form-item>
                  </div>
                  <div style="flex: 3; margin-left: 20px; margin-bottom: 20px"><span style="color: red">*</span>建议图片尺寸像素：258（宽度）*145（高度）,大小500kb以下</div>
                </div>
                <el-form-item label="附件上传">
                  <UploadFile v-model="formLabelAlign.temsCourseChapterList" />
                </el-form-item>

                <el-form-item label="关联自测试题名称">
                  <el-button type="primary" @click="dialog = true">新建考试</el-button>
                </el-form-item>
                <div v-if="formData.fullName" style="font-size: 16px;margin-bottom: 10px;color:gray">自测试题名称：{{
                  formData.fullName }}</div>
                <el-form-item label="开放权限">
                  <el-select v-model="formLabelAlign.scopeRoles" class="set-form-wid" placeholder="请选择开放权限">
                    <el-option v-for="(item, index) in examScopeOptions" :id="item.id" :key="index"
                      :label="item.fullName" :value="item.id" />
                  </el-select>
                </el-form-item>
                <el-form-item label="下载形式">
                  <el-select v-model="formLabelAlign.xzxs" class="set-form-wid" placeholder="请选择下载形式">
                    <el-option label="开放下载" value="开放下载" />
                    <el-option label="积分下载" value="积分下载" />
                    <el-option label="不开放下载" value="不开放下载" />
                  </el-select>
                </el-form-item>
                <el-form-item label="下载所需积分">
                  <el-input v-model="formLabelAlign.jf" class="set-form-wid" placeholder="请输入下载所需积分" type="textarea" />
                </el-form-item>
                <el-form-item label="简介">
                  <el-input v-model="formLabelAlign.description" class="set-form-wid" placeholder="请输入简介"
                    type="textarea" />
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
    <div class="edit-footer">
      <el-button class="edit-footer-btn" @click="goback">取消</el-button>
      <el-button type="primary" @click="submitItem">确定</el-button>
    </div>

    <el-drawer ref="drawer" :show-close="false" direction="rtl" :visible.sync="dialog" custom-class="demo-drawer"
      size="1000px">
      <div class="demo-drawer__content">
        <el-form ref="examForm" :model="formData" label-width="100px">
          <el-form-item label="考试名称" prop="fullName">
            <el-input v-model="formData.fullName" placeholder="请输入考试名称" />
          </el-form-item>
          <el-form-item label="试卷名称" prop="examPaperId">
            <el-select v-model="formData.paperName" placeholder="请选择试卷" style="width: 100%" @focus="openPaperDialog">
              <el-option :value="formData.paperName" :label="formData.paperName" />
            </el-select>
          </el-form-item>
          <el-form-item label="考试类型" prop="categoryId">
            <el-radio v-model="formData.categoryId" label="1">理论考试</el-radio>
            <el-radio v-model="formData.categoryId" label="2">技能考试</el-radio>
            <el-radio v-model="formData.categoryId" label="3">自测</el-radio>
            <el-radio v-model="formData.categoryId" label="4">仅考试</el-radio>
          </el-form-item>
          <el-form-item label="试题顺序" prop="preventionQuestionRandomizes">
            <el-radio v-model="formData.preventionQuestionRandomizes" label="0">同序</el-radio>
            <el-radio v-model="formData.preventionQuestionRandomizes" label="1">随机</el-radio>
          </el-form-item>
          <el-form-item label="考试开放权限" prop="scopeRoles">
            <el-select v-model="formData.scopeRoles" placeholder="请选择考试开放权限" style="width: 100%">
              <el-option v-for="(item, index) in examScopeOptions" :id="item.id" :key="index" :label="item.fullName"
                :value="item.id" />
            </el-select>
          </el-form-item>
          <el-form-item label="考试编号" prop="description">
            <el-input v-model="formData.description" placeholder="请输入考试编号" />
          </el-form-item>
          <el-form-item label="考试有效期" prop="validTime">
            <el-date-picker v-model="formData.validTime" type="datetimerange" range-separator="至"
              start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']" />
          </el-form-item>
          <el-form-item label="考试通过分数" prop="passScore">
            <el-input v-model="formData.passScore" placeholder="请输入考试通过分数" />
          </el-form-item>
          <!-- <div class="sjform-tip">
            <i class="el-icon-warning-outline" />分值设置：系统判断总分必须等于100分
          </div>
          <el-table :data="scoreData" style="width: 100%">
            <el-table-column prop="singleScore" label="单选题分值">
              <template slot-scope="scope">
                <el-input-number v-model="scope.row.singleScore" :min="0" :max="100" placeholder="请输入分值" />
              </template>
</el-table-column>
<el-table-column prop="multipleScore" label="多选题分值">
  <template slot-scope="scope">
                <el-input-number v-model="scope.row.multipleScore" :min="0" :max="100" placeholder="请输入分值" />
              </template>
</el-table-column>
<el-table-column prop="judgeScore" label="判断题分值">
  <template slot-scope="scope">
                <el-input-number v-model="scope.row.judgeScore" :min="0" :max="100" placeholder="请输入分值" />
              </template>
</el-table-column>
<el-table-column prop="fillScore" label="填空题分值">
  <template slot-scope="scope">
                <el-input-number v-model="scope.row.fillScore" :min="0" :max="100" placeholder="请输入分值" />
              </template>
</el-table-column>
<el-table-column prop="questionScore" label="问答题分值">
  <template slot-scope="scope">
                <el-input-number v-model="scope.row.questionScore" :min="0" :max="100" placeholder="请输入分值" />
              </template>
</el-table-column>

<el-table-column prop="passScore" label="及格分数">
  <template slot-scope="scope">
                <el-input-number v-model="scope.row.passScore" :min="0" :max="100" placeholder="请输入分值" />
              </template>
</el-table-column>
</el-table>
-->
        </el-form>
        <div class="demo-drawer__footer">
          <el-button size="medium" @click="cancelForm">取 消</el-button>
          <el-button type="primary" size="medium" :loading="loading" @click="handleSubmit">{{ loading ?
            '提交中 ...'
            : '确 定' }}</el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 试卷选择弹窗 -->
    <el-dialog title="选择试卷" :visible.sync="paperDialogVisible" width="70%">
      <div class="dialog-content">
        <!-- 搜索栏 -->
        <div class="search-bar">
          <el-form :inline="true" :model="paperSearchForm">
            <el-form-item label="试卷名称">
              <el-input v-model="paperSearchForm.name" placeholder="请输入试卷名称" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchPapers">查询</el-button>
              <el-button @click="resetPaperSearch">重置</el-button>
            </el-form-item>
          </el-form>
        </div>

        <!-- 试卷列表 -->
        <el-table ref="paperTable" :data="paperList" border style="width: 100%" highlight-current-row
          @current-change="handlePaperCurrentRowChange">
          <el-table-column width="55">
            <template slot-scope="scope">
              <el-radio v-model="selectedPaper" :label="scope.row">&nbsp;</el-radio>
            </template>
          </el-table-column>
          <el-table-column prop="fullName" label="试卷名称" />
          <el-table-column prop="paperType" label="试卷类型">
            <template slot-scope="scope">
              {{ scope.row.paperType === '1' ? '普通试卷' : '随机试卷' }}
            </template>
          </el-table-column>
          <el-table-column prop="creatorTime" label="创建时间" />
        </el-table>

        <!-- 分页 -->
        <div class="set-table-pg-right">
          <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handlePaperSizeChange"
            @current-change="handlePaperCurrentChange" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="paperDialogVisible = false">取 消</el-button>
        <el-button type="primary" :loading="submitLoading" @click="confirmSelectPaper">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>
import UploadImage from '@/components/UploadImage'
import UploadFile from '@/components/upload/UploadFileSingle1.vue'
import { getList, addExam, getExamDetail, UpdateExam } from '@/views/test/api/exam'
import request from '@/utils/request'
import { getTemsCourseDetail } from '@/api/dataCenter/dataCenterApi'

export default {
  components: {
    UploadImage,
    UploadFile
  },
  data() {
    return {
      dialog: false,
      loading: false,
      submitLoading: false,
      labelPosition: 'top',
      homeExamId: '',
      formData: {
        fullName: '', // 考试名称
        examPaperId: '', // 试卷ID
        categoryId: '', // 考试编号
        startDatetime: null, // 开始时间
        endDatetime: null, // 结束时间
        startDatetimeTemp: [], // 时间范围
        examLength: 30, // 考试时长
        passLine: 60, // 及格分数
        description: '', // 描述
        certificateId: '', // 证书ID
        paperType: '1',
        preventionQuestionRandomizes: '0', // 题目随机
        preventionItemRandomizes: null, // 选项随机
        preventionToggleScreen: 0, // 切屏限制
        preventionToggleScreenSecond: 0, // 切屏次数
        preventionFace: null, // 人脸识别
        preventionIp: null, // IP限制
        preventionAddr: null, // 地址限制
        examRepeat: null, // 重复考试
        examRepeatType: '3', // 考试类型，默认为理论考试
        examRepeatNum: '', // 重复考试次数
        examAnswers: 'submitAfter', // 答案显示
        examOpen: null, // 开放考试
        examSign: null, // 考试签名
        examPass: null, // 考试通过
        examCompletionGrading: null, // 完成评分
        examEssayGrading: null, // 主观题评分
        learningPeriod: 0, // 学习周期
        learningCredit: 0, // 学习学分
        learningIntegral: 0, // 学习积分
        scopeType: 'all', // 范围类型
        scope: '[]', // 范围
        examinerUserIds: '["admin"]', // 考官用户IDs
        creatorUserId: '', // 创建用户ID
        creatorTime: '', // 创建时间
        enabledMark: '1', // 启用标记
        id: '', // ID
        scopeOrganizes: '', // 组织范围
        scopeRoles: '',
        validTime: [], // 临时存储时间范围
        paperName: '', // 试卷名称
        totalScore: '', // 试卷总分
        passScore: 60 // 考试通过分数设置
      },
      paperDialogVisible: false,
      paperSearchForm: {
        name: ''
      },
      paperList: [],
      selectedPaper: null,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      scoreData: [{
        singleScore: 0,
        multipleScore: 0,
        judgeScore: 0,
        fillScore: 0,
        questionScore: 0,
        passScore: 60
      }],
      formLabelAlign: {
        zlmc: '',
        glzc: '',
        zcst: '',
        kfqx: '',
        sszt: '',
        xzxs: '不开放下载',
        xzjf: '',
        hdxs: '',
        cover: '',
        name: '',
        scopeRoles: "",
        description: '',
        temsCourseChapterList: [],
        homeExam: ''
      },
      tableDataList: [{}],
      examScopeOptions: [
        // { fullName: '大众用户', id: '669460031602688197' },
        // { fullName: '培训考试用户', id: '668834371960045637' }
            {
                "id": "668834371960045637",
                "fullName": "培训考试用户",
                "enCode": "0004",
                "type": "全局",
                "organizeInfo": null,
                "description": "",
                "enabledMark": 1,
                "creatorTime": 1741598943000,
                "sortCode": 0,
                "roleType": "业务角色"
            },
            {
                "id": "669460031602688197",
                "fullName": "大众用户",
                "enCode": "04",
                "type": "全局",
                "organizeInfo": null,
                "description": "",
                "enabledMark": 1,
                "creatorTime": 1741748112000,
                "sortCode": 0,
                "roleType": "业务角色"
            }
      ],
      rules: {
        cover: [
          { required: true, message: '上传封面图片', trigger: 'change' }
        ]
      }
    }
  },
  created() {
    this.init()
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    submitItem() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          this.submitLoading = true
          const scope = [
            {
              'type': 'company',
              'selectArr': []
            },
            { 'type': 'department', 'selectArr': [] },
            {
              'type': 'Role',
              'selectArr': [this.formLabelAlign.scopeRoles]
            },
            { 'type': 'Position', 'selectArr': [] },
            { 'type': 'Group', 'selectArr': [] },
            { 'type': 'user', 'selectArr': [] },
            { 'type': 'exclude', 'selectArr': [] }
          ]
          const temsCourseChapterList = this.formLabelAlign.temsCourseChapterList.map(item => ({
            ...item,
            fileJson: JSON.stringify(item),
            enabledMark: 0,
            process: 0
          }))

          const CourseFormData = {
            'scopeType': 'select',
            'scope': JSON.stringify(scope),
            'scopeOrganizes': '',
            'scopeGroups': '',
            'scopeRoles': this.formLabelAlign.scopeRoles,
            'scopePositions': '',
            'scopeUsers': '',
            'scopeExcludeUsers': '',
            temsCourseChapterList,
            cover: this.formLabelAlign.cover,
            name: this.formLabelAlign.name,
            description: this.formLabelAlign.description,
            homeExam: this.formLabelAlign.homeExam,
            enabledMark: '0'
          }
          const id = this.$route.query.id
          const url = id ? '/api/course/TemsCourse/' + id : '/api/course/TemsCourse'
          const method = id ? 'put' : 'post'
          request({
            url,
            method,
            data: CourseFormData
          }).then((res) => {
            this.$router.go(-1)
          })
            .catch((e) => {
            })
            .finally(() => {
              this.submitLoading = false
            })
        }
      })

    },
    searchPapers() {
      this.currentPage = 1
      this.getTableList()
    },

    resetPaperSearch() {
      this.paperSearchForm.name = ''
      this.searchPapers()
    },
    handlePaperCurrentRowChange(row) {
      this.selectedPaper = row
    },
    cancelForm() {
      this.loading = false
      this.dialog = false
      clearTimeout(this.timer)
    },

    openPaperDialog() {
      this.paperDialogVisible = true
      if (!this.paperList.length) {
        this.getTableList()
      }
    },

    async getTableList() {
      try {
        const params = {
          currentPage: this.currentPage,
          pageSize: this.pageSize,
          keyword: this.paperSearchForm.name
        }
        const res = await getList(params)
        if (res.code === 200) {
          this.paperList = res.data.list || []
          const pagination = res.data.pagination || {}
          this.currentPage = pagination.currentPage || 1
          this.pageSize = pagination.pageSize || 10
          this.total = pagination.total || 0

          if (this.formData.examPaperId) {
            const selectedPaper = this.paperList.find(item => item.id === this.formData.examPaperId)
            if (selectedPaper) {
              this.selectedPaper = selectedPaper
            }
          }
        } else {
          this.$message.error(res.msg || '获取试卷列表失败')
        }
      } catch (error) {
        console.error('获取试卷列表失败:', error)
        this.$message.error('获取试卷列表失败')
      }
    },
    handlePaperSizeChange(val) {
      this.pageSize = val
      this.getTableList()
    },
    handlePaperCurrentChange(val) {
      this.currentPage = val
      this.getTableList()
    },
    confirmSelectPaper() {
      if (!this.selectedPaper) {
        this.$message.warning('请选择试卷')
        return
      }
      this.formData.examPaperId = this.selectedPaper.id
      this.formData.paperName = this.selectedPaper.fullName
      this.paperDialogVisible = false
    },
    handleSubmit() {
      this.$refs.examForm.validate(async (valid) => {
        if (valid) {
          try {
            // 处理时间
            const startTime = this.formData.validTime ? new Date(this.formData.validTime[0]).getTime() : null
            const endTime = this.formData.validTime ? new Date(this.formData.validTime[1]).getTime() : null
            const scope = [
              {
                'type': 'company',
                'selectArr': []
              },
              { 'type': 'department', 'selectArr': [] },
              {
                'type': 'Role',
                'selectArr': [this.formData.scopeRoles]
              },
              { 'type': 'Position', 'selectArr': [] },
              { 'type': 'Group', 'selectArr': [] },
              { 'type': 'user', 'selectArr': [] },
              { 'type': 'exclude', 'selectArr': [] }
            ]
            let params
            if (this.homeExamId) {
              // 是编辑
              params = {
                folders: "[\"638100473177446981\"]",
                'scopeType': 'select',
                'scope': JSON.stringify(scope),
                // 'scopeRoles': this.formData.scopeRoles.join(','),
                'scopeRoles': this.formData.scopeRoles,
                'scopeOrganizes': '',
                'scopeGroups': '',
                'scopePositions': '',
                'scopeUsers': this.formData.paperName,
                'scopeExcludeUsers': '',
                id: this.formData.id,
                parentId: null,
                fullName: this.formData.fullName,
                examPaperId: this.formData.examPaperId,
                paperName: this.formData.paperName,
                description: this.formData.description || "",
                startDatetime: startTime,
                endDatetime: endTime,
                examLength: this.formData.examLength || 30,
                // passLine: this.scoreData[0].passScore || 60,
                passLine: this.formData.passScore || 60,
                certificateId: this.formData.certificateId || "",
                preventionItemRandomizes: this.formData.preventionItemRandomizes || 0,
                preventionToggleScreen: this.formData.preventionToggleScreen || 0,
                preventionToggleScreenSecond: this.formData.preventionToggleScreenSecond || 0,
                preventionFace: this.formData.preventionFace || null,
                preventionIp: this.formData.preventionIp || null,
                preventionAddr: this.formData.preventionAddr || null,
                examRepeat: this.formData.examRepeat || 0,
                categoryId: this.formData.categoryId || "",
                examRepeatType: this.formData.examRepeatType || "",
                preventionQuestionRandomizes: this.formData.preventionQuestionRandomizes || '0',
                examRepeatNum: this.formData.examRepeatNum || null,
                examAnswers: this.formData.examAnswers || "passAfter",
                examOpen: this.formData.examOpen || 0,
                examSign: this.formData.examSign || null,
                examPass: this.formData.examPass || 0,
                examCompletionGrading: this.formData.examCompletionGrading || 0,
                examEssayGrading: this.formData.examEssayGrading || null,
                learningPeriod: this.formData.learningPeriod || 0,
                learningCredit: this.formData.learningCredit || 0,
                learningIntegral: this.formData.learningIntegral || 0,
                examinerUserIds: this.formData.examinerUserIds || "[\"admin\"]",
                // enabledMark: this.formData.enabledMark || "1",
                enabledMark: "1",
                startDatetimeTemp: [startTime, endTime]
              }
            } else {
              params = {
                ...this.formData,
                startDatetime: startTime,
                endDatetime: endTime,
                startDatetimeTemp: [startTime, endTime],
                passLine: this.formData.passScore || 60,
                scopeUsers: this.formData.paperName
              }
              params.folders = '[638100473177446981]'
              params.scopeType = 'select';
              params.scope = JSON.stringify(scope);
              // params.scopeRoles = this.formData.scopeRoles.join(',');
              params.scopeRoles = this.formData.scopeRoles;
            }

            // 删除不需要的字段
            delete params.validTime
            delete params.paperName
            let res
            if (this.homeExamId) {
              res = await UpdateExam(params)
            } else {
              res = await addExam(params)
            }

            if (res.code === 200) {
              this.$message.success(this.homeExamId ? '修改成功' : '添加成功')
              this.formLabelAlign.homeExam = res.data.id
              this.loading = false
              this.$refs.drawer.closeDrawer()
            } else {
              this.$message.error(this.homeExamId ? '修改失败' : '添加失败')
            }
          } catch (error) {
            this.$message.error(this.homeExamId ? '修改失败' : '添加失败')
          }
        }
      })
    },
    init() {
      const id = this.$route.query.id
      if (id) {
        getTemsCourseDetail(id)
          .then(res => {
            const temsCourseChapterList = res.data.temsCourseChapterList.map(item => JSON.parse(item.fileJson))

            this.formLabelAlign = {
              ...this.formLabelAlign,
              ...res.data,
              temsCourseChapterList,
              scopeRoles: res.data.scopeRoles
            }
            return res.data
          })
          .then(async (res) => {
            if (!res.homeExam) return;
            const { data } = await getExamDetail(res.homeExam)
            this.homeExamId = res.homeExam
            this.formData = {
              ...this.formData,
              ...data,
              validTime: data.startDatetime && data.endDatetime ? [
                this.formatDateTime(data.startDatetime),
                this.formatDateTime(data.endDatetime)
              ] : [],
              paperName: data.scopeUsers,
              scopeRoles: data.scopeRoles,
              passScore: data.passLine
            }
          })
      }

      // request({
      //   url: `api/permission/Role?n=1743175635&organizeId=0&keyword=&currentPage=1&pageSize=20&sort=desc&sidx=&typeList=ApplicationRole&menuId=07029F61-993A-4A46-BF56-20DE382F4F66`,
      //   method: 'get'
      // })
      //   .then(res => {
      //     this.examScopeOptions = res.data.list
      //   })
    },
    formatDateTime(timestamp) {
      if (!timestamp) return ''
      const date = new Date(timestamp)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      const seconds = String(date.getSeconds()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
    }

  }
}
</script>
<style lang="scss" scoped>
.title-top {
  margin-top: 32px;
}

.edit {
  box-sizing: border-box;
  height: 100%;
  position: relative;

  .edit-title {
    font-weight: 500;
    font-size: 19px;
    color: #536387;
    line-height: 29px;
    text-align: left;
    font-style: normal;

    .title-1 {
      color: #536387;
      padding-right: 11px;
    }

    .title-2 {
      padding-left: 11px;
      color: #323232;
    }
  }

  .edit-content {
    width: 100%;
    height: auto;
    background: #fff;
    box-sizing: border-box;
    padding: 32px;
    margin-top: 32px;

    .edit-content-title {
      font-size: 21px;
      width: 100%;
      height: 39px;
      line-height: 21px;
      position: relative;
      padding-left: 11px;
      border-bottom: 1px solid #e2e7f5;

      &:before {
        content: "";
        position: absolute;
        width: 4px;
        height: 21px;
        top: 0;
        left: 0;
        background: #2265ee;
        display: inline-block;
      }
    }

    .edit-content-form {
      margin-top: 32px;
      margin-bottom: 100px;
      margin-left: 24px;
    }
  }

  .edit-footer {
    width: 100%;
    height: 103px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: #fff;
    text-align: right;
    line-height: 103px;

    .el-button {
      width: 100px;
      height: 40px;
      margin-right: 32px;
      background: #2265ee;
      border-box: 1px solid #2265ee;

      &:active {
        opacity: 0.8;
      }
    }
  }
}

.edit-study {
  margin-top: 32px;

  ul {
    list-style: none;
    font-size: 19px;
    color: #0d162a;

    li {
      width: 176px;
      height: 53px;
      display: inline-block;
      line-height: 53px;
      text-align: center;
      cursor: pointer;
    }
  }
}

.active-study {
  background-color: #f6f8fc;
  border-radius: 5px 133px 0px 0px;
}

::v-deep .el-icon-my-zs {
  background: url("../../assets/images/zs1.png") no-repeat;
  width: 20px;
  height: 20px;
}

::v-deep .el-icon-my-zs:before {
  content: "替";
  font-size: 20px;
  visibility: hidden;
}

::v-deep .el-icon-my-zs {
  font-size: 18px;
}

::v-deep .el-icon-my-zs:before {
  content: "\e611";
}

.set-form-wid {
  width: 400px !important;
}

.set-upload {
  ::v-deep .el-upload {
    width: 400px;
    height: 52px;
    background: #ffffff;
    border-radius: 0px 0px 4px 4px;
    border: 1px solid #e2e7f5;
  }

  .el-button {
    background-color: #fff;
    border: none;
    color: #2265ee;
    width: 398px;
    height: 50px;
  }
}

::v-deep .el-textarea__inner {
  resize: vertical !important;
}

.edit-footer-btn {
  background: none !important;
}

//新增样式
.edit {
  height: 100%;
  box-sizing: border-box;

  .edit-title {
    font-weight: 500;
    font-size: 19px;
    color: #536387;
    line-height: 29px;
    text-align: left;

    .title-left {
      display: flex;
      align-items: center;

      .back-icon {
        font-size: 20px;
        margin-right: 10px;
        cursor: pointer;
        color: #536387;

        &:hover {
          color: #2265ee;
        }
      }
    }

    .title-1 {
      color: #536387;
      padding-right: 11px;
    }

    .title-2 {
      padding-left: 11px;
      color: #323232;
    }
  }

  .edit-content {
    background: #fff;
    margin-top: 32px;
    padding: 32px;
    border-radius: 4px;

    .edit-content-title {
      font-size: 21px;
      line-height: 21px;
      position: relative;
      padding-left: 11px;
      margin-bottom: 32px;
      border-bottom: 1px solid #e2e7f5;
      padding-bottom: 16px;

      &:before {
        content: "";
        position: absolute;
        width: 4px;
        height: 21px;
        top: 0;
        left: 0;
        background: #2265ee;
      }
    }

    .edit-content-form {
      padding: 0 24px;
    }
  }

  .edit-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 80px;
    background: #fff;
    padding: 0 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.05);

    .footer-btn {
      width: 100px;
      height: 40px;
      margin-left: 16px;
    }
  }

  .sjform-tip {
    width: 100%;
    height: 46px;
    background: #fffbe8;
    border-radius: 4px;
    line-height: 46px;
    color: #ed6a0c;
    box-sizing: border-box;
    padding-left: 16px;
    margin-bottom: 16px;

    i {
      margin-right: 8px;
    }
  }
}

.form-input {
  width: 300px !important;
}

.form-textarea {
  width: 100% !important;
}

.grid-content {
  margin-bottom: 20px;
}

.dialog-content {
  .search-bar {
    margin-bottom: 20px;
  }

  .set-table-pg-right {
    margin-top: 20px;
    text-align: right;
  }
}

.demo-drawer {
  width: 50%;
}

.demo-drawer__footer {
  position: absolute;
  bottom: 20px;
  left: 25%;
  width: 50%;
  display: flex;
  justify-content: space-around;
}

::v-deep .singleImg-container.custom-uploader {
  width: 150px;
  height: 150px;

  .img-uploader-icon {
    width: 148px;
    height: 148px;
    line-height: 120px;
  }

  .icon-box .upload-tip {
    bottom: calc(50% - 20px);
  }

  .el-upload-list .el-upload-list__item,
  .el-upload-list .el-image {
    width: 148px;
    height: 148px;
  }
}
</style>
